<template>
    <div class="vol-tabs">
      <el-tabs
        type="border-card"
        style="
          min-height: 370px;
          box-shadow: none;
          border-bottom: 0;
          border-top: 10px solid #eee;
        "
      >
        <el-tab-pane>
          <template #label>
            <span><i class="el-icon-date"></i> 质检方案</span>
          </template>
          <!-- 显示操作按钮 -->
          <div>
            <el-button
            type="success"
            size="mini"
            ghost
            @click="add"
            ><i class="el-icon-plus"></i>添加行</el-button
          >
            <el-button
              type="primary"
              size="mini"
              ghost
              @click="del"
              ><i class="el-icon-close"></i> 删除行</el-button
            >
            <!-- <el-button
              type="info"
              size="mini"
              @click="$refs.table1.load()"
              ><i class="el-icon-refresh"></i> 刷新</el-button
            > -->
          </div>
          <el-alert
            title="双击行可以编辑"
            type="warning"
            style="margin: 10px 0"
            show-icon
          >
          </el-alert>
          <!-- :defaultLoadPage="false"打开窗口禁用默认加载数据 -->
          <mes-table
            ref="table1"
            :clickEdit="true"
            :loadKey="true"
            :columns="tableColumns1"
            :pagination-hide="false"
            :height="230"
            :url="table1Url"
            :index="true"
            :defaultLoadPage="false"
            @loadBefore="loadTableBefore1"
            @loadAfter="loadTableAfter1"
          ></mes-table>
        </el-tab-pane>
  
        <!-- 从表2 -->
        <el-tab-pane :lazy="false" label="点检项目">
          <template #label>
            <span><i class="el-icon-date"></i> 质检明细</span>
          </template>
          <!-- 从表2配置 ,双击可以开启编辑-->
          <div style="padding-bottom: 10px">
            <el-button
            type="success"
            size="mini"
            ghost
            @click="add2"
            ><i class="el-icon-plus"></i> 添加行</el-button
          >
            <el-button
            type="primary"
            size="mini"
            ghost
            @click="del2"
            ><i class="el-icon-close"></i> 删除行</el-button
          >
          <!-- <el-button
            type="info"
            size="mini"
            @click="$refs.table2.load()"
            ><i class="el-icon-refresh"></i> 刷新</el-button
          >
           -->
          </div>
          <el-alert
          title="双击行可以编辑"
          type="warning"
          style="margin-bottom: 10px;"
          show-icon
        >
        </el-alert>
          <mes-table
            ref="table2"
            :loadKey="true"
            :clickEdit="true"
            :columns="tableColumns2"
            :pagination-hide="false"
            :height="275"
            :url="table2Ur"
            :defaultLoadPage="false"
            @loadBefore="loadTableBefore2"
            :index="true"
          ></mes-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <modelHeader ref="modelHeader"/>
    <modelFooter ref="modelFooter"/>
  </template>
  <script>
  //开发一对多从表需要参照MesTable与viewgrid组件api
  import MesTable from "@/components/basic/MesTable.vue";
  import modelHeader from "../../qualitytests/testmaterial/Quality_TestMaterialHeader.vue"
  export default {
    components: { MesTable,modelHeader },
    data() {
      return {
        //从表1
        table1Url: "api/Quality_TestProcess/GetTable1Data", //table1获取数据的接口
        //表配置的字段注意要与后台返回的查询字段大小写一致
        tableColumns1: [
          {field:'QualityTestPlanId',title:'质检方案主键',type:'guid',width:110,hidden:true,readonly:true,require:true,align:'left'},
        { field: "QualityTestMaterialId", title: "原料质检Id", type: "guid", width: 80, hidden: true },
        {field:'QualityTestPlanName',title:'质检方案名称',type:'string',width:120,align:'left',sort:true,edit: { type: "text" }},
        {field:'QualityTestPlanCode',title:'质检方案编码',type:'string',width:120,align:'left'  ,edit: { type: "text" }},
        {field:'QualityTestPlanEnable',title:'质检状态',type:'int',bind:{ key:'QualityTestPlanEnableRadio',data:[]},width:110,align:'left'},
        {field:'QualityTestGroup',title:'质检组',type:'string',bind:{ key:'QualityTestGroup1',data:[]},width:180,align:'left'},
        
        ],
        //从表2
        table2Ur: "api/Quality_TestProcess/GetTable2Data", //table1获取数据的接口
        //表配置的字段注意要与后台返回的查询字段大小写一致
        tableColumns2: [
          { field: "QualityTestDetailId", title: "质检明细主键Id", type: "guid", width: 80, hidden: true },
          { field: "QualityTestMaterialId", title: "原料质检Id", type: "guid", width: 80, hidden: true },
          {
            field: "TestDetailNum",
            title: "质检数量",
            type: "int",
            width: 200,
            edit: { type: "text" }
          },
          {
            field: "TestDetailNumOK",
            title: "合格数量",
            type: "int",
            width: 150,
            edit: { type: "text" }
          },
          {
            field: "TestDetailNumNo",
            title: "不合格数量",
            type: "int",
            width: 150,
            edit: { type: "text" }
          },
          {
            field: "Qualityinspector",
            title: "质检人",
            type: "string",
            width: 150,
            edit: { type: "text" }
          },
          {
            field: "Detailedremarks",
            title: "备注",
            type: "string",
            width: 150,
            edit: { type: "text" }
          },
          {
            field: "TestDetailResult",
            title: "质检结果",
            type: "string",
            width: 150,
            edit: { type: "text" }
          }
        ],
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.modelOpen();
      });
    },
    methods: {
      //如果要获取页面的参数请使用 this.$emit("parentCall",见下面的使用方法
      modelOpen() {
        let $parent;
        //获取生成页面viewgrid的对象
        this.$emit("parentCall", ($this) => {
          $parent = $this;
        });
        console.log('$parent.currentAction:', $parent.currentAction);
        //当前如果是新建重置两个表格数据
        if ($parent.currentAction == "Add") {
          this.$refs.table1.reset();
          this.$refs.table2.reset();
        } else {
          //如果是编辑，直接调用表格的load方法加载数据
          this.$refs.table1.load();
          this.$refs.table2.load();
        }
      },
      loadTableBefore1(param, callBack) {
        let $parent = null;
        //当前是子页面，获取查询viewgrid页面的对象()
        this.$emit("parentCall", ($this) => {
          $parent = $this;
        });
        //如果是新建功能，禁止刷新操作
        if ($parent.currentAction == "Add") {
          return callBack(false);
        }
        //获取当前编辑主键id值
        let QualityTestProcesslId = $parent.currentRow.QualityTestProcesslId;
        console.log("loadTableBefore1 - 当前ID:", QualityTestProcesslId);
        
        //添加从表的查询参数(条件)
        //将当前选中的行主键传到后台用于查询(后台在GetTable2Data(PageDataOptions loadData)会接收到此参数)
        param.wheres = param.wheres || [];
        param.wheres.push({ name: "QualityTestProcesslId", value: QualityTestProcesslId });
        callBack(true);
      },
      //从表2加载数据数前(操作与上面一样的,增加查询条件)
      loadTableBefore2(param, callBack) {
        let $parent = null;
        //当前是子页面，获取查询viewgrid页面的对象()
        this.$emit("parentCall", ($this) => {
          $parent = $this;
        });
        //如果是新建功能，禁止刷新操作
        if ($parent.currentAction == "Add") {
          return callBack(false);
        }
        //获取当前编辑主键id值
        let QualityTestProcesslId = $parent.currentRow.QualityTestProcesslId;
        console.log("loadTableBefore2 - 当前ID:", QualityTestProcesslId);
        
        //添加从表的查询参数(条件)
        //将当前选中的行主键传到后台用于查询(后台在GetTable2Data(PageDataOptions loadData)会接收到此参数)
        param.wheres = param.wheres || [];
        param.wheres.push({ name: "QualityTestProcesslId", value: QualityTestProcesslId });
        callBack(true);
      },
      //从后台加载从表1数据后
      loadTableAfter1(data, callBack) {
        return true;
      },
  
  
      del() {
        let rows = this.$refs.table1.getSelected();
        if (rows.length == 0) {
          return this.$Message.error("请先选中行");
        }
        this.$refs.table1.delRow();
        // 如果需要调用后台删除API，请取消下面的注释并修改为正确的API路径
        // if (rows[0].QualityTestPlanId) {
        //   var param = [rows[0].QualityTestPlanId];
        //   this.http.post('/api/Quality_TestProcess/delPlan', param, true).then((result) => {
        //     this.$Message.info("删除成功！");
        //   });
        // }
      },
      del2() {
        let rows = this.$refs.table2.getSelected();
        if (rows.length == 0) {
          return this.$Message.error("请先选中行");
        }
        this.$refs.table2.delRow();
        // 如果需要调用后台删除API，请取消下面的注释并修改为正确的API路径
        // if (rows[0].QualityTestDetailId) {
        //   var param = [rows[0].QualityTestDetailId];
        //   this.http.post('/api/Quality_TestProcess/delDetail', param, true).then((result) => {
        //     this.$Message.info("删除成功！");
        //   });
        // }
      },
      add() {
        this.$refs.modelHeader.open();
      },
      add2() {
        // 构造一行空数据，字段与tableColumns2一致
        const emptyRow = {
          QualityTestDetailId: "00000000-0000-0000-0000-000000000000", // 使用空GUID
          QualityTestMaterialId: null, // 这个会在保存时关联到主表
          TestDetailNum: 0,
          TestDetailNumOK: 0,
          TestDetailNumNo: 0,
          Qualityinspector: "",
          Detailedremarks: "",
          TestDetailResult: ""
        };
        this.setTable2Rows([emptyRow]);
      },
      setTable1Rows(modelTyep, _rows) {
        this.$refs.table1.rowData.unshift(..._rows);
        
        // 为每条主表数据自动添加一条明细数据
        _rows.forEach(row => {
          const detailData = {
            QualityTestDetailId: "00000000-0000-0000-0000-000000000000", // 使用空GUID
            QualityTestMaterialId: null, // 这个会在保存时关联到主表
            TestDetailNum: 0,
            TestDetailNumOK: 0,
            TestDetailNumNo: 0,
            Qualityinspector: "",
            Detailedremarks: "",
            TestDetailResult: ""
          };
          this.setTable2Rows([detailData]);
        });
      },
      setTable2Rows(_rows){
        console.log('setTable2Rows:', _rows);
        this.$refs.table2.rowData.unshift(..._rows);
      },
      getRows() {
        //获取选中的行
        let rows = this.$refs.table1.getSelected();
        if (rows.length == 0) {
          return this.$Message.error("请先选中行");
        }
        this.$Message.error(JSON.stringify(rows));
      },
    },
  };
  </script>
  <style lang="less" scoped>
  .vol-tabs {
    background: white;
  }
  </style>
  